<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todolist</title>
	<style type="text/css">
		.list_con{
			width:600px;
			margin:50px auto 0;
		}
		.inputtxt{
			width:550px;
			height:30px;
			border:1px solid #ccc;
			padding:0px;
			text-indent:10px;			
		}
		.inputbtn{
			width:40px;
			height:32px;
			padding:0px;
			border:1px solid #ccc;
		}
		.list{
			margin:0;
			padding:0;
			list-style:none;
			margin-top:20px;
		}
		.list li{
			height:40px;
			line-height:40px;
			border-bottom:1px solid #ccc;
		}

		.list li span{
			float:left;
		}

		.list li a{
			float:right;
			text-decoration:none;
			margin:0 10px;
		}
	</style>
	 <script src="js/react.development.js"></script>
	 <script src="js/react-dom.development.js"></script>   
	 <script src="js/babel.min.js"></script>		
</head>
<body>

	<div id="root"></div>

	<script type="text/babel">
		class Todolist extends React.Component{
			constructor(props){
				super(props);
				this.state = {
					aList:['学习html','学习css','学习javascript','学习go语言'],
					sTodo:''//输入框中获取到的内容：即将被添加入列表的内容
				};
			}
			fnChange(ev){
				this.setState({sTodo:ev.target.value})
			}
			fnAdd(){
				this.setState(prevState=>{
					if(this.state.sTodo == ''){
						alert("请输入任务内容");
						return;
					}
					return{aList:[...prevState.aList,prevState.sTodo],sTodo:""};
				})
				// 添加完成后，清空输入框
				// this.setState({sTodo:""})
			}
			fnDel(i){
				this.setState(prevState=>{
					let list = [...prevState.aList]
					// splice方法，从第i个元素开始剪切，减掉N个
					list.splice(i,1);
					return{ aList:list};
				})
			}
			fnUp(i){
				this.setState(prevState=>{
					if(i == 0){
						alert("到顶了");
						return;
					}
					let list = [...prevState.aList];
					let nowItem = list[i];
					list.splice(i,1);
					list.splice(i-1,0,nowItem);
					return {aList:list};
				})
			}
			fnDown(i){
				this.setState(prevState=>{
					if(i == prevState.aList.length-1){
						alert("到底了")
						return
					}
					let list = [...prevState.aList];
					let nowItem = list[i];
					list.splice(i,1);
					list.splice(i+1,0,nowItem);
					return {aList:list};
				})
			}
			render(){
				return(
					<div className="list_con">
						<h2>To do list</h2>
						<input type="text" value={this.state.sTodo} id="txt1" className="inputtxt" onChange={this.fnChange.bind(this)} />
						<input type="button"  value="增加" id="btn1" className="inputbtn" onClick={this.fnAdd.bind(this)} />
						
						<ul id="list" className="list">
							{
								this.state.aList.map((item,i)=>							
									<li key={i}><span>{ item }</span>
										<a href="javascript:;" className="up" onClick={this.fnUp.bind(this,i)}> ↑ </a>
										<a href="javascript:;" className="down" onClick={this.fnDown.bind(this,i)}> ↓ </a>
										<a href="javascript:;" className="del" onClick={this.fnDel.bind(this,i)}>删除</a>
									</li>
								)
							}							
						</ul>
					</div>
				)
			}
		}
		//渲染
		ReactDOM.render(
			<Todolist />,
			document.getElementById("root")
		); 

	</script>
</body>
</html>